import { editRoleAuthByRoleCode, selectRoleAuthByRoleCode } from '@/api/conf'
import CCard from '@/components/card'

interface Conf_administrator_state {
  transfer: {
    targetKeys: any[]
  }
  haveAuthList: User.HaveAuth[] | null
  notHaveAuthList: User.NotHaveAuth[] | null
  currentRole: {
    roleCode: RoleCode | null
    roleName: RoleName | null
  }
}
export const conf_roleOfApi_state = reactive<Conf_administrator_state>({
  transfer: {
    targetKeys: []
  },
  haveAuthList: null,
  notHaveAuthList: null,
  currentRole: {
    roleCode: null,
    roleName: null
  }
})

//? 接口区域 -----------------------------------
export const getRoleAuthData = async () => {
  let { roleCode } = toRefs(conf_roleOfApi_state.currentRole)
  if (!roleCode.value) return
  let res = await selectRoleAuthByRoleCode({ roleCode: roleCode.value }).catch(err => {})
  if (res) {
    let { haveAuthList, notHaveAuthList } = toRefs(conf_roleOfApi_state)
    notHaveAuthList.value = res.data.notHaveAuth
    haveAuthList.value = res.data.haveAuth
    console.log(res.data)
  }
}

//? 复用组件 -----------------------------------

//? 页面组件 事件 -----------------------------------
const returnCateNameIco = (cateName: CateName) => {
  let icoName: string = ''
  switch (cateName) {
    case '查看类别':
      icoName = 'icon-chakanshuju'
      break
    case '新增类别':
      icoName = 'icon-shujuxinxi'

      break
    case '修改类别':
      icoName = 'icon-xiugai'
      break
    case '删除类别':
      icoName = 'icon-shanchu'

      break
    case '导出类别':
      icoName = 'icon-daochu'
      break
    case '其他类别':
      icoName = 'icon-gdgn'
      break
  }

  return (
    <div class='font-bold text-lg text-primary'>
      <i class={['iconfont mr-2 text-xl', icoName]}></i>
      <span>{cateName}</span>
    </div>
  )
}
//? 页面组件 -----------------------------------

/**已有的权限 */
export const ViewContentLeft = defineComponent({
  setup() {
    let { haveAuthList, currentRole } = toRefs(conf_roleOfApi_state)

    const handleClose = (haveAuth: User.PlatFormRoleAuths<'1'>) => {
      editRoleAuthByRoleCode({
        roleAuthId: haveAuth.roleAuthId,
        authFlag: '0'
      })
        .then(res => {
          getRoleAuthData()
        })
        .catch(err => {})
    }

    return () => (
      <div class='h-full p-2'>
        <CCard title={(currentRole.value.roleName || '') + ' 已有的权限'}>
          {haveAuthList.value?.map(haveAuth => (
            <div class='grid grid-cols-5 border-b border-default mb-4 p-4'>
              <div class='text-base grid grid-cols-1 place-items-center'>
                {returnCateNameIco(haveAuth.cateName)}
              </div>
              <div class='col-span-4'>
                {haveAuth.platFormRoleAuths.map(auth => (
                  <a-tag
                    closable
                    onClose={() => handleClose(auth)}
                    class='m-1 p-1 text-sm bg-success_light text-success border-success_half inline-flex cursor-pointer'
                  >
                    {{
                      default: () => <span>{auth.authId}</span>,
                      closeIcon: () => (
                        <i class='iconfont icon-x text-sm w-2 h-2 overflow-hidden hover:bg-danger rounded-full hover:text-white font-bold'></i>
                      )
                    }}
                  </a-tag>
                ))}
              </div>
            </div>
          ))}
        </CCard>
      </div>
    )
  }
})

/**未拥有的权限 */
export const ViewContentRight = defineComponent({
  setup() {
    let { notHaveAuthList, currentRole } = toRefs(conf_roleOfApi_state)

    const handleAdd = (notHaveAuth: User.PlatFormRoleAuths<'0'>) => {
      console.log(notHaveAuth)
      editRoleAuthByRoleCode({
        roleAuthId: notHaveAuth.roleAuthId,
        authFlag: '1'
      })
        .then(res => {
          getRoleAuthData()
        })
        .catch(err => {})
    }
    return () => (
      <div class='h-full p-2'>
        <CCard title={(currentRole.value.roleName || '') + ' 未拥有的权限'}>
          {notHaveAuthList.value?.map(notHaveAuth => (
            <div class='grid grid-cols-5 border-b border-default mb-4 p-4'>
              <div class='text-base grid grid-cols-1 place-items-center'>
                {returnCateNameIco(notHaveAuth.cateName)}
              </div>
              <div class='col-span-4'>
                {notHaveAuth.platFormRoleAuths.map(auth => (
                  <a-tag
                    closable
                    onClick={() => handleAdd(auth)}
                    onClose={() => handleAdd(auth)}
                    class='m-1 p-1 text-sm bg-primary_light text-primary border-primary_half inline-flex cursor-pointer'
                  >
                    {{
                      default: () => <span>{auth.authId}</span>,
                      closeIcon: () => (
                        <i class='iconfont icon-xiaojiahao text-sm w-2 h-2 overflow-hidden hover:bg-primary rounded-full hover:text-white font-bold'></i>
                      )
                    }}
                  </a-tag>
                ))}
              </div>
            </div>
          ))}
        </CCard>
      </div>
    )
  }
})
